<template>
  <!-- 根节点 -->
  <view class="page">
    <fu-custom :isBack="true" bgColor="bg-white">
      <view slot="content">我的关注</view>
    </fu-custom>
    <view class="list padding-lr-24">
      <block v-for="item in lists" :key="item.aid">
        <view @click='gowhere(item)' class="bg-white">
          <view class="solid-bottom fu-shop-item">
            <view class="flex justify-between align-center" style="height: 100%;">
              <view class="fu-shop-logo">
                <fu-image :src="item.collect_img" mode="aspectFill" />
              </view>
              <view class="fu-shop-main flex flex-direction justify-between" style="height: 100%;">
                <view class="fu-shop-name">
                  <text class="text-df text-black">{{ item.collect_title }}</text>
                </view>
                <!-- <view class="flex flex-direction"> -->
                  <text class="text-sm text-gray" >销量{{ item.sales_sum }}</text>
                  <!-- <text class="text-sm margin-lr-sm text-gray"> | </text> -->
                <!-- </view> -->
				<text class="text-sm text-gray" style="margin-top: 20rpx;">{{ item.collect_num }}人收藏</text>
              </view>
            </view>
            <view class="fu-shop-action">
              <view class="text-sm cancel" @click.stop="cancelAttention(item)">取消收藏</view>
			  
            </view>
          </view>
        </view>
      </block>
    </view>
    <!-- 空布局 -->
    <fu-empty-ui v-if="lists.length == 0 && isInit" ></fu-empty-ui>
    <!-- 加载状态 -->
    <uni-load-more v-if="lists.length > 5" :status="status"></uni-load-more>
  </view>
</template>

<script>
  //js方法
  export default {

    //注册组件
    components: {

    },
    //页面数据
    data() {
      return {
        isInit: false, // 是否请求过数据
        status: 'more', // 加载状态
        page: 1, // 页数
        size: 10, // 页条数
        lists: [],
        totalSize: ''
      }
    },
    //计算属性
    computed: {

    },
    //监听属性
    watch: {

    },
    //页面将要显示
    onShow() {

    },
    //页面加载完毕
    onLoad() {
      this.getList()
    },
    onReachBottom() {
      this.getList(); // 搜索方法

    },
    onPullDownRefresh() {
      this.status = 'more';
      this.page = 1;
      this.getList();
      setTimeout(()=>{
        uni.endPullToRefresh();
      },1000)
    },
    //所有方法
    methods: {
      cancelAttention(item) {
		
		console.log(item,'jdksdkjsdhkhfk')
		
        this.$util.showModal({
          title: this.i18n['提示'],
          content: '确定要取消关注？',
          confirmColor: this.$store.state.themeColor,
          success: res => {
            if (res.confirm) {
              this.$api
                .post(global.apiUrls.cancelAttention, {
                  aid: item.aid,
                  type: 4
                })
                .then(res => {
                  if (res.data.code == 1) {
                    console.log(123123);
                    this.page = 1;
                    this.status = 'more'
                    this.getList();
                  } else {
                    this.$message.info(res.data.msg);
                  }
                })
                .catch(err => {});

            }
          }
        });







      },
      getList() {
        if (this.status != 'more') return;
        this.status = 'loading';
        let data = {
          page: this.page,
          list_rows: this.size,
          type: 4
        };
        // 获取商品列表接口
        this.$api
          .get(global.apiUrls.getAttention, data)
          .then(res => {
            this.isShowLoading = false;
            console.log('搜索结果', res);
            if (res.data.code == 1) {
              let totalSize = res.data.data.total;
              this.totalSize = Math.ceil(totalSize / 10); // 悬浮按钮总页码
              this.currentPage = this.page; //悬浮当前页面
              console.log(res.data.data);
              let list = res.data.data.data;
              if (this.page == 1) this.lists = [];
              console.log(list);
              if (list) {
                if (this.isSearchShop) {
                  list.forEach(item => {
                    this.lists.push(item.shop_info);
                  });
                } else {
                  this.lists = this.lists.concat(list);
                }
              }
              console.log(this.lists);
              if (this.lists.length >= totalSize) {
                this.status = 'noMore';
              } else {
                this.status = 'more';
                this.page++;
              }
              this.isInit = true;
            } else {
              this.$message.info(res.data.msg);
            }
          })
          .catch(err => {
            this.isShowLoading = false;
          });
      },
      // 去店铺详情吧
      gowhere(item) {
        this.$urouter.navigateTo({
          url: '/pages/goods/shop/shop/index',
          params: {
            partner_id: item.collect_id
          }
        });
      }


    }

  }
</script>

//页面css样式
<style lang="scss" scoped>
  page,
  .page,
  body {
    min-height: 100vh;
    background-color: #FFFFFF;
  }

  .padding-lr-24 {
    padding: 0 24rpx;
  }

  // 店铺信息 start
  .fu-shop-item {
    width: 100%;
    display: flex;
    align-items: center;
	height: 204rpx;
    padding: 32rpx 0;
    justify-content: space-between;

    .fu-shop-logo {
      width: 160rpx;
      height: 160rpx;
      // border-radius: 50%;
      overflow: hidden;
      margin-right: 16rpx;

      .fu-shop-logo-pic {
        width: 100%;
        height: 100%;
      }
    }

    .fu-shop-main {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
	  // height: 100%;
      .fu-shop-name {
        display: flex;
        align-items: center;
      }
    }

    .fu-shop-action {
      // align-self: end;
      display: flex;
      flex-direction: column;
      align-items: center;

      .fu-shop-go {
        width: 156rpx;
        height: 56rpx;
        margin-bottom: 16rpx;
        border-radius: 8rpx;
        line-height: 56rpx;
        text-align: center;
        color: #fff;
        background-color: $bgtheme;
      }

      .cancel {
        width: 156rpx;
        height: 56rpx;
        border-radius: 28rpx;
        line-height: 56rpx;
        text-align: center;
        color: $theme;
		border: 1rpx solid $theme;
      }
    }
  }

  /deep/.cu-bar {
    border-bottom: 1rpx solid #EEEEEE;

  }
</style>
